<template>
  <div>
    <input v-bind="$props" @change="handleInput" :value="currentValue" ref="input"  @input="handleInput"/>
  </div>
</template>

<script>
  export default{
    name: 'ElInput',
    componentName: 'ElInput',
    props: ['placeholder', 'type', 'disabled', 'name', 'disabled', 'value'],
    data () {
      return {
        currentValue: this.value
      }
    },
    template: `<input  v-bind="$props" @change="handleInput" >`,
    watch: {
      'value': function (val, oldValue) {
        console.log(val)
      }
    },
    methods: {
      handleInput (event) {
        const value = event.target.value
        console.log('input')
        this.$emit('input', value)
        this.$emit('change', value)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
